<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maxinum-scale=1,user-scalable=no">
    <title>14标签页和工具提示插件</title>
    <link rel="stylesheet" href="..\bootstrap-3.3.7-dist\css\bootstrap.min.css">
    <style>
        a:focus{
            outline: none;
        }
    </style>
</head>

<body style="margin:200px;">

    <!-- <ul class="nav nav-tabs">
        <li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li>
        <li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li>
        <li><a href="#jquery" data-toggle="tab">jQuery</a></li>
        <li><a href="#extjs" data-toggle="tab">Extjs</a></li>
    </ul> -->

    <ul id="nav" class="nav nav-tabs">
        <!-- data-toggle="tab" -->
        <li class="active"><a href="#html5">HTML5</a></li>
        <li><a href="#bootstrap">Bootstrap</a></li>
        <li><a href="#jquery">jQuery</a></li>
        <li><a href="#extjs">Extjs</a></li>
    </ul>

    <div class="tab-content" style="padding: 10px;">
        <!-- tab-pane隐藏 默认要显示出来 in -->
        <div class="tab-pane fade in active" id="html5">1陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅</div>
        <div class="tab-pane fade" id="bootstrap">2陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅</div>
        <div class="tab-pane fade" id="jquery">3陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅</div>
        <div class="tab-pane fade" id="extjs">4陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅</div>
    </div>

    <br/><br/><br/><br/><br/>
    <div id="selction">
        <a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>
        <a href="#" rel="tooltip" data-toggle="tooltip" title="超文本标识符">HTML5</a>
    </div>

    <div class="btn-group">
        <button class="btn btn-default" data-toggle="tooltip" title="超文本标识符">左</button>
        <button class="btn btn-default" data-toggle="tooltip" title="超文本标识符">中</button>
        <button class="btn btn-default" data-toggle="tooltip" title="超文本标识符">右</button>
    </div>

    <a href="#" id="BB" data-toggle="tooltip" title="超文本标识符">BBBBB</a>
    <button id="bb" class="btn btn-default">按钮</button>
   

    <script src="..\bootstrap-3.3.7-dist\js\jquery-3.2.1.min.js"></script>
    <script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
    <script type="text/javascript">
        
        // 第二种方式 脚本的方式显示
        $('#nav a').on('click', function(e){
            // 阻止默认行为
            e.preventDefault();
            $(this).tab('show');
        });

        $('#nav a').on('show.bs.tab',function(){
            alert('调用tab时触发');
        })
        $('#nav a').on('shown.bs.tab',function(){
            alert('显示完整个标签时触发');
        })

        // 工具提示  通过鼠标移动选定在特定的元素上时候显示相关的提示语
        // $('a').tooltip({
        //     delay:{
        //         // 显示的时候500毫秒  隐藏的时候100毫秒
        //         show :500,
        //         hide :100,
        //     },
        //     placement: 'left',      // 左边显示
        // });
        
        $('#selction').tooltip({
            // 有两个的时候 选择其一  并且要从他的父元素绑定 否则没有效果
            selector: 'a[rel=tooltip]'
        });

        $('button').tooltip({
            delay:{
                show: 100,
                hide: 100,
            },
            // 设置内容区域为body  就不会有浮动
            container: 'body',
        })

        // tooltip 事件有四种 show,shown,hide,hiden
        $('#bb').on('click',function(){
            // $('#BB').tooltip('show');
            $('#BB').tooltip('toggle');         // 反向 一下显示一下隐藏
        });

        $('#BB').on('show.bs.tooltip',function(){
            alert('显示前触发！');
        })


     </script>
</body>
</html>